<template id="bindPhone">
  <div>
      <div class="bindPhone_con">
          <div class="bindPhone_top">
              <img src="../image/d1.png" alt="" @click="get_p1()">
              <h4>更改绑定地址</h4>
          </div>
          <!--第一-->
          <div v-if="bind_change" class="bindPhone_form_con">
              <!--验证原手机号-->
              <div>
                  <span class="bind_1">验证原手机</span>
                  <img class="first_step" src="../image/quan2.png" alt="">
                  <span class="first_one">第一步</span>
              </div>
              <!--绑定新手机号-->
              <div>
                  <span class="bind_2">绑定新手机</span>
                  <img src="../image/quan1.png" alt="" class="second_step">
                  <span class="second_one">第二步</span>
              </div>
              <img src="../image/day.jpg" alt="" class="img_da">
              <!--手机号快捷登录-->
              <form action="" id="bindPhone_form">
                  <p>
                      <input type="text" placeholder="手机号" class="bindPhone_test1">
                      <img src="../image/phone1.jpg" alt="">
                      <span id="VerCode">获取验证码</span>
                  </p>
                  <p>
                      <input type="text" placeholder="验证码" class="bindPhone_test">
                      <img src="../image/yan.jpg" alt="">
                  </p>
                  <p style="display:none;">首次使用手机登录将自动为你注册，享受新客户专属折扣</p>
                  <p ><span @click="get_change()">下一步去绑定更换手机号</span></p>
                  <p>
                      <span @click="getPwdLogin()" style="display:none">账号密码登录</span>
                      <span @click="get_wait()">未收到验证码？</span>
                  </p>
              </form>
          </div>
         <!-- 第二-->
          <div  class="bindPhone_form_con_2" v-if="bind_change_2">
              <!--验证原手机号-->
              <div>
                  <span class="bind_1_2">验证原手机</span>
                  <img class="first_step_2" src="../image/quan1.png" alt="">
                  <span class="first_one_2">第一步</span>
              </div>
              <!--绑定新手机号-->
              <div>
                  <span class="bind_2_2">绑定新手机</span>
                  <img src="../image/quan2.png" alt="" class="second_step_2">
                  <span class="second_one_2">第二步</span>
              </div>
              <img src="../image/day.jpg" alt="" class="img_da_2">
              <!--手机号快捷登录-->
              <form action="" id="bindPhone_form_2">
                  <p>
                      <input type="text" placeholder="新手机号" class="bindPhone_test1">
                      <img src="../image/phone1.jpg" alt="">
                      <span>获取验证码</span>
                  </p>
                  <p>
                      <input type="text" placeholder="验证码" class="bindPhone_test">
                      <img src="../image/yan.jpg" alt="">
                  </p>
                  <p style="display:none;">首次使用手机登录将自动为你注册，享受新客户专属折扣</p>
                  <p ><span>完成</span></p>
                  <p>
                      <span style="display:none">账号密码登录</span>
                      <span @click="get_wait()">未收到验证码？</span>
                  </p>
              </form>
          </div>

      </div>

      <!--未收到验证码弹窗-->
      <div class="model_y" v-if="model_show">
          <h3>提示</h3>
          <p>验证码的有效时间为30分钟,请耐心等待</p>
          <p><span>继续等待</span><span>联系客服</span></p>
      </div>
      <!--背景弹窗-->
      <div class="back_bg" v-if="bg_backgrond" @click="get_all()"></div>
  </div>
</template>

<script>
    export default {
        name: 'bindPhone',
        data() {
            return {
                bind_change:true,
                bind_change_2:false,
                //背景
                bg_backgrond:false,
                //未收到验证码
                model_show:false,
                passd:true,
                psd:false,
            }
        },

        mounted: function () {

        },
        methods: {
            get_change:function(){
                this.bind_change=false;
                this.bind_change_2=true;
            },
            get_wait:function(){
                this.model_show=true;
                this.bg_backgrond=true;
            },
            get_all:function () {
                this.model_show=false;
                this.bg_backgrond=false;
            },
            get_p1:function(){
                window.history.go(-1);
            }
        }
    }
</script>
<style>
    .back_bg{
        height:100%;
        width:1000%;
        background:#000000;
        opacity:0.5;
        position: fixed;
        top:0;
        left:0;
        z-index:1;
    }
    /*背景弹窗*/
    .model_y p:nth-of-type(2) span{
        flex:1;
        color:#0870d7;
        font-size:0.28rem;
        height:0.7rem;
        line-height:0.7rem;
        text-align:center;
    }
    .model_y p:nth-of-type(2) span:nth-of-type(1){
        border-right:0.01rem solid #d9d4cc;
    }
    .model_y p:nth-of-type(2){
        height:0.7rem;
        width:4.62rem;
        border-top:0.01rem solid #d9d4cc;
        display:flex;
    }
    .model_y p:nth-of-type(1){
        height:0.3rem;
        line-height:0.3rem;
        text-align:center;
        color:#000000;
        font-size:0.2rem;
        margin-bottom: 0.25rem
    }
    .model_y h3{
        width:4.62rem;
        height:0.56rem;
        text-align:center;
        line-height:0.56rem;
        font-size:0.24rem;
        color:#000000;
        font-weight:normal;
    }
    .model_y{
        height:1.82rem;
        width:4.62rem;
        background:#ffffff;
        border-radius:0.1rem;
        position:fixed;
        top: 38%;
        left: 14%;
        z-index:2;
    }
    /*未收到验证码弹窗*/
    /*3*/
    .img_da_2{
        display:block;
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        left: 3.18rem;
        top: 1.25rem;
    }
    .first_one_2{
        display:block;
        width:0.9rem;
        height:0.36rem;
        position:absolute;
        font-size:0.24rem;
        line-height:0.36rem;
        text-align:center;
        color:#bebebe;
        top: 0.85rem;
        left: 1.5rem;
    }
    .second_one_2{
        display:block;
        width:0.9rem;
        height:0.36rem;
        position:absolute;
        font-size:0.24rem;
        line-height:0.36rem;
        text-align:center;
        color:#ed8100;
        top: 0.85rem;
        left: 4.15rem;
    }
    .first_step_2{
        display:block;
        width:2.2rem;
        height:0.9rem;
        position:absolute;
        top:1rem;
        left:0.86rem;
    }
    .second_step_2{
        display:block;
        width:2.2rem;
        height:0.9rem;
        position:absolute;
        top:1rem;
        left:3.5rem;
    }
    .bind_2_2{
        position:absolute;
        top:1rem;
        left:3.5rem;
        font-size:0.18rem;
        display:block;
        height:0.9rem;
        width:2.2rem;
        line-height:0.9rem;
        text-align:center;
        color:#ed8100;
    }
    .bind_1_2{
        position:absolute;
        top:1rem;
        left:0.86rem;
        font-size:0.18rem;
        display:block;
        height:0.9rem;
        width:2.2rem;
        line-height:0.9rem;
        text-align:center;
        color:#bebebe;
    }
    #bindPhone_form_2 p:nth-of-type(5) span:nth-of-type(1){
        height:0.83rem;
        float:left;
        line-height:0.83rem;
        font-size:0.22rem;
        color:#ff9242;
        font-weight:700;
    }
    #bindPhone_form_2 p:nth-of-type(5) span:nth-of-type(2){
        height:0.83rem;
        float:right;
        line-height:0.83rem;
        font-size:0.22rem;
        color:#ff9242;
        font-weight:700;
    }
    #bindPhone_form_2 p:nth-of-type(5){
        width:5.1rem;
        height:0.83rem;
    }
    #bindPhone_form_2 p:nth-of-type(4) span{
        width:5rem;
        height:0.68rem;
        display:block;
        color:#ffffff;
        background:#bebebe;
        font-size:0.3rem;
        line-height:0.68rem;
        text-align:center;
        margin:0.47rem 0 0 0;
        border-radius:0.05rem;
    }
    #bindPhone_form_2 p:nth-of-type(4) span.selected{
        background-color: orangered;
    }
    #bindPhone_form_2 p:nth-of-type(4){
        width:5.1rem;
        height:0.7rem;
    }
    #bindPhone_form_2 p:nth-of-type(3){
        width:5.12rem;
        height:0.67rem;
        line-height:0.67rem;
        font-size:0.18rem;
        color:#7b6945;
    }
    .bindPhone_test::-webkit-input-placeholder{
        color:#d1d1d2;
        font-size:0.2rem;
    }
    #bindPhone_form_2 p:nth-of-type(2) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
        /*  line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #bindPhone_form_2 p:nth-of-type(2) img{
        display:block;
        width:0.38rem;
        height:0.39rem;
        position:absolute;
        left:0;
        top:0.5rem;
    }
    #bindPhone_form_2 p:nth-of-type(2){
        width:5.1rem;
        height:0.54rem;
        border-bottom:0.01rem solid #bcb3a1;
        position:relative;
        padding-top:0.45rem;
        margin-bottom:1rem;
    }
    #bindPhone_form_2 p:nth-of-type(1) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
        /*  line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #bindPhone_form_2 p:nth-of-type(1) span{
        display:block;
        position:absolute;
        width:1.43rem;
        height:0.45rem;
        background:#ff7d01;
        color:#ffffff;
        line-height:0.45rem;
        text-align:center;
        font-size:0.2rem;
        border-radius:0.05rem;
        top:0.2rem;
        right:0;
    }
    #bindPhone_form_2 p:nth-of-type(1){
        width:5.1rem;
        height:0.55rem;
        border-bottom:0.01rem solid #bcb3a1;
        position:relative;
        padding-top:0.2rem;
    }
    #bindPhone_form_2 p:nth-of-type(1) img{
        display:block;
        width:0.3rem;
        height:0.53rem;
        position:absolute;
        top:0.14rem;
        left:0;
    }
    #bindPhone_form_2{
        width:5.1rem;
        height:4.4rem;
        display:block;
        margin:0 auto;
        /*  background:red;*/
    }
    .bindPhone_form_con_2{
        height:3.45rem;
        width:100%;
        padding-top:2.8rem;
        position:relative;
    }
    /*2*/
    .img_da{
        display:block;
        width:0.21rem;
        height:0.36rem;
        position:absolute;
        left: 3.18rem;
        top: 1.25rem;
    }
    .first_one{
        display:block;
        width:0.9rem;
        height:0.36rem;
        position:absolute;
        font-size:0.24rem;
        line-height:0.36rem;
        text-align:center;
        color:#ed8100;
        top: 0.85rem;
        left: 1.5rem;
    }
    .second_one{
        display:block;
        width:0.9rem;
        height:0.36rem;
        position:absolute;
        font-size:0.24rem;
        line-height:0.36rem;
        text-align:center;
        color:#bebebe;
        top: 0.85rem;
        left: 4.15rem;
    }
    .first_step{
        display:block;
        width:2.2rem;
        height:0.9rem;
        position:absolute;
        top:1rem;
        left:0.86rem;
    }
    .second_step{
        display:block;
        width:2.2rem;
        height:0.9rem;
        position:absolute;
        top:1rem;
        left:3.5rem;
    }
    .bind_2{
        position:absolute;
        top:1rem;
        left:3.5rem;
        font-size:0.18rem;
        display:block;
        height:0.9rem;
        width:2.2rem;
        line-height:0.9rem;
        text-align:center;
        color:#bebebe;
    }
    .bind_1{
        position:absolute;
        top:1rem;
        left:0.86rem;
        font-size:0.18rem;
        display:block;
        height:0.9rem;
        width:2.2rem;
        line-height:0.9rem;
        text-align:center;
        color:#ee9440;
    }
    #bindPhone_form p:nth-of-type(5) span:nth-of-type(1){
        height:0.83rem;
        float:left;
        line-height:0.83rem;
        font-size:0.22rem;
        color:#ff9242;
        font-weight:700;
    }
    #bindPhone_form p:nth-of-type(5) span:nth-of-type(2){
        height:0.83rem;
        float:right;
        line-height:0.83rem;
        font-size:0.22rem;
        color:#ff9242;
        font-weight:700;
    }
    #bindPhone_form p:nth-of-type(5){
        width:5.1rem;
        height:0.83rem;
    }
    #bindPhone_form p:nth-of-type(4) span{
        width:5rem;
        height:0.68rem;
        display:block;
        color:#ffffff;
        background:#bebebe;
        font-size:0.3rem;
        line-height:0.68rem;
        text-align:center;
        margin:0.47rem 0 0 0;
        border-radius:0.05rem;
    }
    #bindPhone_form p:nth-of-type(4) span.selected{
        background-color: orangered;
    }
    #bindPhone_form p:nth-of-type(4){
        width:5.1rem;
        height:0.7rem;
    }
    #bindPhone_form p:nth-of-type(3){
        width:5.12rem;
        height:0.67rem;
        line-height:0.67rem;
        font-size:0.18rem;
        color:#7b6945;
    }
    .bindPhone_test::-webkit-input-placeholder{
        color:#d1d1d2;
        font-size:0.2rem;
    }
    #bindPhone_form p:nth-of-type(2) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
        /*  line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #bindPhone_form p:nth-of-type(2) img{
        display:block;
        width:0.38rem;
        height:0.39rem;
        position:absolute;
        left:0;
        top:0.5rem;
    }
    #bindPhone_form p:nth-of-type(2){
        width:5.1rem;
        height:0.54rem;
        border-bottom:0.01rem solid #bcb3a1;
        position:relative;
        padding-top:0.45rem;
        margin-bottom:1rem;
    }
    #bindPhone_form p:nth-of-type(1) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
        /*  line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #bindPhone_form p:nth-of-type(1) span{
        display:block;
        position:absolute;
        width:1.43rem;
        height:0.45rem;
        background:#ff7d01;
        color:#ffffff;
        line-height:0.45rem;
        text-align:center;
        font-size:0.2rem;
        border-radius:0.05rem;
        top:0.2rem;
        right:0;
    }
    #bindPhone_form p:nth-of-type(1){
        width:5.1rem;
        height:0.55rem;
        border-bottom:0.01rem solid #bcb3a1;
        position:relative;
        padding-top:0.2rem;
    }
    #bindPhone_form p:nth-of-type(1) img{
        display:block;
        width:0.3rem;
        height:0.53rem;
        position:absolute;
        top:0.14rem;
        left:0;
    }
    #bindPhone_form{
        width:5.1rem;
        height:4.4rem;
        display:block;
        margin:0 auto;
        /*  background:red;*/
    }
    .bindPhone_form_con{
        height:3.45rem;
        width:100%;
        padding-top:2.8rem;
        position:relative;
    }
    .bindPhone_top{
        height:0.75rem;
        width:100%;
        position:relative;
    }
    .bindPhone_top img{
        height:0.33rem;
        width:0.32rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .bindPhone_top h4{
        height:0.75rem;
        color:#85a45a;
        font-size:0.24rem;
        line-height:0.75rem;
        text-align:center;
        font-weight:normal;
    }
    .bindPhone_con{
        width:100%;
        height:11rem;
        background:url(../image/login.png) no-repeat;
        background-size:cover;
    }

</style>